<template>
  <a-modal
    :width="500"
    title="指定分配"
    :visible="visible"
    @cancel="onClose"
    @ok="onSubmit"
    okText="保存"
    :destroyOnClose="true"
    :confirmLoading="loading"
  >
    <a-form layout="vertical">
      <a-row :wrap="true" :gutter="12">
        <a-col :span="24">
          <a-form-item label="选择成员" v-bind="validateInfos.followup_uid">
            <a-select
              v-model:value="formData.followup_uid"
              :options="userList"
              placeholder="请选择分配的人员"
              :allowClear="true"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>

</template>
<script>
import { defineComponent, reactive, toRefs, computed, watch } from "vue";
import { Form, message } from "ant-design-vue";
import store from "../../../../store";
import request from "../../../../common/utils/request";
const useForm = Form.useForm;
import _ from "lodash";
export default defineComponent({
  name: "AllotUserModal",
  props: {
    ids: {
      type: Array,
      default: () => [],
    },
    visible: {
      type: Boolean,
      default: false,
    },
    userList: {
      type: Array,
      default: () => [],
    },
  },
  components: {  },
  setup(props, { emit }) {
    const state = reactive({
      loading: false,
    });

    const formData = reactive({
      followup_uid: undefined,
    });
    const ruleRef = reactive({
      followup_uid: [{ required: true, message: "必选" }],
    });

    const { resetFields, validate, validateInfos} = useForm(formData, ruleRef);

    const onSubmit = () => {
      validate().then(() => {
        let params = {
          ids: _.cloneDeep(props.ids)
        };
        for (let key in formData) {
          if (formData[key] || formData[key] === 0) {
            params[key] = formData[key];
          }
        }
        state.loading = true;
        request.put("/org", "/business/customer/allocation", params).then((res) => {
          message.success(res.msg || "分配成功!");
          emit("success");
        }).finally(() => {
          state.loading = false;
        });
      });
    };

    const onClose = () => {
      emit("handleCancel");
    };


    const init = () => {};

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          init();
        } else {
          resetFields();
          state.loading = false;
        }
      }
    );

    return {
      ...toRefs(state),
      formData,
      validateInfos,
      onClose,
      onSubmit,
    };
  },
});
</script>

<style lang="less" scoped>
p {
  &:last-of-type {
    margin-bottom: 0;
  }
}
.user-tag :deep(.ant-tag) {
  border-radius: 20px !important;
  padding: 0 12px 0 0 !important;
  background: #f1f1f1;
  border: none;
}
</style>
